@import "./common.less";

.mobile{
    max-width: 68rem;
    width: 100%;
    // height: 8rem;
    margin: 0 auto;
    font-size: 3rem;
    .h6{
        height: 6rem !important;
    }
    .h7{
        height: 7rem !important;
    }
    .mobile-header{
        text-align: center;
        height: 8rem;
        line-height: 8rem;
        color: #fdfef8;
        background-color: #193C4A;
        font-size: 3rem;
        width: 100%;
    }
    .mobile-intro{
        padding: 2rem;
        font-size: 2rem;
        overflow: hidden;
        border-bottom: 1px solid #ebebeb;;
        .intro-title{
            color: #5f9dab;
            .ml-6{
                margin-left: .6rem;
            }
            img{
                height: 2rem;
                margin-top: .6rem;
            }
        }
        .intro-content{
            color: #666666;
            line-height: 4rem;
        }
    }

    .mlbile-list{
        display: flex;
        font-size: 2rem;
        .list-title{
            width: 12rem;
            background-color:#f7f7fa ;
            .title{
                color: #858585; 
                height: 6rem;
                padding: 3rem 0;
                line-height: 3rem;
                
            }
            .db{
                color: #333; 
                border-left: .5rem solid #5f9dab;
                background-color: white;
            }
        }
        .list-cont{
            flex: 1;
            padding: 2rem;
            .cont-search{
                line-height: 5rem;
                display: flex;
                // padding: 25px 0;
                width: 100%;
                font-size: 2rem;
                height: 5rem;
                padding:2.5rem 0;
                .search-l{
                    width: 7rem;
                    color: #4e5152;
                }
                .search-r{
                  width: 39rem;
                  height: 5rem;
                  // background-color: #ffffff;
                  border-radius:5rem;
                  border: solid 1px #e5e5e5;
                  position: relative;
                  input{
                      height: 4.9rem;
                      border: transparent;
                      margin-left: 2rem;
                      outline: none;
                  }
                  .r-big{
                      position: absolute;
                      right: 1rem;
                      top: 1rem;
                  }
                }
            }
            .cont-people{
                .getJiang{
                    border: solid 1px #f6bd3b !important; 
                    width: 24rem !important;
                    // height: 294px;
                }
                .people{
                    width: 24rem;
                    height: 42rem;
                    position: relative;
                    background-color: #ffffff;
                    border-radius: 4px;
                    border: solid 1px #ebebeb; 
                    float: left;
                    overflow: hidden;
                    margin-left: 2rem;
                    margin-bottom: 2rem;
                    &:nth-child(2n+1){
                        margin-left: 0px;
                    }
                    .hj{
                        position: absolute;
                        top: 5px;
                        left: 0px;
                        z-index: 2;
                        img{
                            height: 4rem;
                        }
                    }
                    .jz{
                        position: absolute;
                        top: 0px;
                        right: 0rem;
                        z-index: 2;
                        img{
                            width: 6rem;
                        }
                    }
                    .people-img{
                        width: 24rem;
                        height: 14rem;
                        position: relative;
                        background-color: yellowgreen;
                        margin-bottom: 10px;
                        .img{
                            width: 100%;
                            height: auto;
                        }
                        .img-ps{
                            height: 4rem;
                            position: absolute;
                            bottom: 0;
                            width: 100%;
                            background-color: rgba(0, 0, 0, .5);                        
                            text-align: center;
                            line-height: 4rem;
                            color: white;
                        }
                    }
                    .people-info{
                        line-height: 3rem;
                        color: #9e9e9e;
                        padding: 0 2rem;
                        .w{
                            color: #4d4d4d;
                        }
                    }
                    .people-flower{
                        height: 2rem;
                        margin: 1rem auto;
                        width: 23rem;
                        display: flex;
                        text-align: center;
                        line-height: 2rem;
                        img{
                            height: 2rem;
                        }
                        div{
                            flex: 1;
                        }
                        .l{
                            border-left: 1px solid #e5e5e5;
                        }
                    }
                    .people-btn{
                        width: 21rem;
                        height: 5rem;
                        background-color: #5f9dab;
                        border-radius: 4px;
                        color: white;
                        line-height: 5rem;
                        text-align: center;
                        margin: 0 auto 2rem;
                        cursor: pointer;
                    }
                    .people-btn-gray{
                        width: 21rem;
                        height: 5rem;
                        background-color: #ebebeb;
                        border-radius: 4px;
                        color: #a6a6a6;
                        line-height: 5rem;
                        text-align: center;
                        margin: 0 auto 2rem;
                        cursor: pointer;
                    }
                  }
            }
        }
    }
 
}